<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>销售趋势</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="bower_components/layer/layer.css"/>
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <!-- Date Picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">

 <link rel="stylesheet" type="text/css" href="css/sale_trend.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/select2/dist/css/select2.min.css"/>
  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<style>
#reservation .calendar-table{
	display: none;
}
.select2{
	display: inline-block;
	width: 120px;
}
.select2-container .select2-selection--single{
	border-radius: 0 0;
	height: 33px;
	position: relative;
	border-color: #efefef;
	top: -2px;
	background: #7adddd;
}.select2-container--default .select2-selection--single .select2-selection__rendered{
	color: white;
}
.form-control{
	background: none;
	border-color: #efefef;
	
}
.search_btn1{
	background:#39cccc ;
	vertical-align: top;
	border-radius: 5px 5px;
	color: white;
}
.morris-hover.morris-default-style .morris-hover-point{
	color: black!important;
}
#bar_table{
	font-size: 12px;
	font-weight: normal;
	width: 100%;
}
#bar_table tr{
	height: 32px;
	border-bottom: #ecf0f5 solid 1px;
}
</style>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>D</b>W</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>Duowei</b>CRM</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- Messages: style can be found in dropdown.less-->

          <!-- Notifications: style can be found in dropdown.less -->

          <!-- Tasks: style can be found in dropdown.less -->

          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="img/avatar2.jpg" class="user-image" alt="User Image">
              <span  class="dw_name">Amy</span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img src="img/avatar2.jpg" class="img-circle" alt="User Image"><p><span class="dw_name">Amy 唐意</span> - <span class="dw_part">分销部</span></p>
              </li>
              <!-- Menu Body -->
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-right">
                  <a href="login.html" class="btn btn-default btn-flat">退出登录</a>
                </div>
                 <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat change_password">修改密码</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="img/avatar2.jpg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p class="dw_name">Amy</p>
          <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
        </div>
      </div>
      <!-- search form -->
      <div  class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
          <span class="input-group-btn">
                <span  name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></span>

              </span>
        </div>
</div>
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">功能目录</li>
        <li>
          <a href="buser_manage.html">
            <i class="fa fa-th"></i> <span>商家管理</span>
            <span class="pull-right-container">
              
            </span>
          </a>
        </li>
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>客户管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="active"><a href="user_manage.html"><i class="fa fa-circle-o"></i> 客户管理</a></li>
            <li><a href="user_update.html"><i class="fa fa-circle-o"></i> 客户更新审核</a></li>
              <li><a href="user_lookCheck.html"><i class="fa fa-circle-o"></i> 客户查看审核</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-files-o"></i>
            <span>沟通管理</span>
            <span class="pull-right-container">
              
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="talk_infor.html"><i class="fa fa-circle-o"></i> 沟通商家</a></li>
            <li><a href="event_lable.html"><i class="fa fa-circle-o"></i> 事件批注</a></li>
            <li><a href="event_look.html"><i class="fa fa-circle-o"></i> 事件审核</a></li>
            <li><a href="important_user.html"><i class="fa fa-circle-o"></i> 圈重点客户</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>销售管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="sales_sell.html"><i class="fa fa-circle-o"></i> 入账信息</a></li>
            <li><a href="sale_refund.html"><i class="fa fa-circle-o"></i> 退款售后</a></li>
            <li><a href="break_manage.html"><i class="fa fa-circle-o"></i> 断货管理</a></li>
            <li><a href="break_check.html"><i class="fa fa-circle-o"></i> 断货审批</a></li>
          </ul>
        </li>
        <li>
          <a href="product_manage.html">
            <i class="fa fa-th"></i> <span>产品管理</span>
            <span class="pull-right-container">
              
            </span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-edit"></i> <span>项目管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="item_infor.html"><i class="fa fa-circle-o"></i> 项目信息</a></li>
            <li><a href="item_protect.html"><i class="fa fa-circle-o"></i> 项目维护</a></li>
            <li><a href="item_warn.html"><i class="fa fa-circle-o"></i> 项目预警</a></li>
             <li><a href=""><i class="fa fa-circle-o"></i> 销售趋势</a></li> 
              <li><a href=""><i class="fa fa-circle-o"></i> 类目分析</a></li>
          </ul>
        </li>          
        <li class="treeview">
          <a href="#">
            <i class="fa fa-pie-chart"></i>
            <span>数据分析</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href=""><i class="fa fa-circle-o"></i> 店铺拿货密度</a></li>
            <li><a href=""><i class="fa fa-circle-o"></i> 店铺合作单位</a></li>
            <li><a href=""><i class="fa fa-circle-o"></i> 客情排行榜</a></li>
          </ul>
        </li>
         <li>
          <a href="">
            <i class="fa fa-th"></i> <span>授权管理</span>
            <span class="pull-right-container">
              
            </span>
          </a>
        </li>         
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
       <section class="content" style="padding-bottom: 20px;">
			
			   <div class="row">
		       	 <div class="col-lg-1"></div>
		       	 <div class="col-lg-10 box1 bg-teal-gradient">
		       	 	<div class="box_title">
		       	 		<h4>销售趋势</h4>
		       	 		<select class="select2 form-control">
		       	 			<option>按月</option>
		       	 			<option>按季度</option>
		       	 			<option>按周</option>
		       	 		</select>
		       	 		<select class="select2 form-control">
		       	 			<option>销售额</option>
		       	 			<option>成交次数</option>
		       	 			<option>沟通次数</option>
		       	 			<option>留言次数</option>
		       	 		</select>
		       	 		<input type="text" placeholder="请输入时间范围" class="date_pick form-control " id="reservation" style="width: 200px;">
		       	 		<input type="button"  class="btn btn-default search_btn1" value="筛选"/>
		       	 	</div>
		       	 	<div class=" row box1_lines bg-teal-gradient" >
		       	 		<div class="col-lg-12 lines_item" id="my_chart2" style="height: 280px;">
		       	 		</div>
		       	 	</div>
		       	 </div>
		       </div>
		       <div class="row" style="margin-top: 20px;">
		       	 <div class="col-lg-1"></div>
		       	 <div class="col-lg-10 box1">
		       	 	<div class="box_title">
		       	 		<h4>类目分析</h4>
		       	 		<input type="text" placeholder="请输入时间范围" class="date_pick form-control " id="reservation2" style="width: 200px;">
		       	 		<input type="button" class="btn btn-default" value="筛选"/>
		       	 	</div>
		       	 	<div class=" row box1_lines">
		       	 		<div class="col-lg-6 lines_item" id="my_chart" style="height: 400px;">
		       	 		</div>
		       	 		<div class="col-lg-6 " style="height: 400px;overflow-y: scroll;">
		       	 			<table id="bar_table">
		       	 				<thead>
			       	 				<tr>
			       	 					<th>排名</th>
			       	 					<th style="width:250px ;">店铺名</th>
			       	 					<th>拿货额</th>
			       	 					<th>占比</th>
			       	 				</tr>
		       	 				</thead>
		       	 				<tbody class="table_data">
		       	 					
		       	 				</tbody>
		       	 			</table>
		       	 			
		       	 		</div>
		       	 	</div>
		       	 </div>
		       </div>
		       
        
        </section>
        <!-- right col -->
      </div>
    <!-- /.content -->
  </div>
   
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.0.0
    </div>
    <strong>Copyright &copy; 2017-2018 <a href="#">Mr.Tie</a>.</strong> All rights
    reserved.
  </footer>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/layer/layer.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<!-- daterangepicker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- AdminLTE App -->
<script src="js/echart.min.js"></script>
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<script src="dist/js/adminlte.min.js"></script>
  <script src="js/jq.cookie.js"></script>
  <script src="js/search_user.js"></script>
<script>
		function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  decodeURI(r[2]); return null;
}
var item_id = GetQueryString("item_id")	;
	$('.select2').select2()
	  $('#reservation').daterangepicker({
	  	locale:{format:'YYYY'}
	  });
	   $('#reservation2').daterangepicker({
	  	locale:{format:'YYYY-MM-DD'}
	  });
	  var myChart2 = document.getElementById('my_chart2');
      
      $.ajax({
			    headers:{
			    	Accept:"application/json;charset=utf-8"
			    },
				type:"get",
				url:"http://www.duoweish.com/apis/StoreTrend/",
				data:{
                   
                    Project:item_id
                    
				},
				success:function(data){
					if(data!='failure'){
						for (var i=0;i<data[1].length;i++) {
							var num = i+1;
							var Tr = `
									<tr>
										<td>${num}</td>
										<td><a class="look_user" index="${data[1][i][3]}">${data[1][i][0]}<a></td>
										<td>${data[1][i][1]}</td>
										<td>${data[1][i][2]}</td>
									</tr>
								`;
							$('.table_data').append(Tr);
						}
				   	    pie_view(data[0]);
				   	    user_detail();
			   	   }else{
			   	   	layer.msg('查询失败')
			   	   }
				}
			})
     function user_detail(){
     	$('.look_user').click(function(){
     		var ID = $(this).attr('index')
     				layer.open({
     		
						        type: 2
						        ,title: false
						        ,anim:4
						        ,closeBtn: 1
						        ,area:['100%','100%']
						        ,shade: 0
						        ,id: 'LAY_layuipro' 
						        ,shadeClose:true
						        ,btnAlign: 'c'
						        ,moveType: 1 
						        ,content:'http://www.duoweish.com/crm/user_infor.html?Id_data='+ID
						     
							   			  
					         })
					
				})
     		
     }
	function pie_view(data){
		var myChart = echarts.init(document.getElementById('my_chart'));
		 myChart.setOption({
							    
							    tooltip : {
							        trigger: 'item',
							        formatter: "{a} <br/>{b} : {c} ({d}%)"
							    },
							    toolbox: {
							        show : true,
							        feature : {
							            saveAsImage : {show: true}
							        }
							    },
							    calculable : true,
							    series : [
							        {
							            name:'',
							            type:'pie',
							            radius : '55%',
							            center: ['50%', '60%'],
							            data:data
							        }
							    ]
							});
	}
    
    $.ajax({
			    headers:{
			    	Accept:"application/json;charset=utf-8"
			    },
				type:"get",
				url:"http://www.duoweish.com/apis/SalesTrend/",
				data:{
                       Project:item_id,
                       DateBegin:'2018',
                       DateEnd:'2018',
                       TimeKind:'1',
                       DataKind:'1'
                       
				},
				success:function(data){
					if(data == "failure"){
						layer.msg('查询失败')
					}else{
						var chartData = [];
						var chartJson = {};
						for (var i=0;i<data[0].length;i++) {
							chartJson["day"] = data[0][i];
							chartJson["value"] = data[1][i];
							chartData.push(chartJson);
							chartJson={};
						}
					 console.log(chartData)
						new Morris.Line({  
					        	element: myChart2,  
					       	 	resize: true,  
					       	 	data:chartData ,  
					        	xkey: 'day',  
					        	ykeys: ['value'],  
					        	labels: ['数据1'],  
					            lineColors       : ['#efefef'],
							    lineWidth        : 2,
							    hideHover        : 'auto',
							    gridTextColor    : '#fff',
							    gridStrokeWidth  : 0.4,
							    pointSize        : 4,
							    pointStrokeColors: ['#efefef'],
							    gridLineColor    : '#efefef',
							    gridTextFamily   : 'Open Sans',
							    gridTextSize     : 10 
					    });  
					}
				  }
				});
</script>
</body>
</html>
